<template>
	<view class="page">
		<view class="toptitle">欢迎登录禧戴针织管理系统</view>
		<image mode="widthFix" class="loginIcon" src="../../static/loginIcon.png"></image>
		<view class="infoBox">
			<view class="infoBoxItem bottomBoard">
				<input v-model="phone" class="infoBoxItemLeft" placeholder="请输入账号" />
			</view>
			<view class="infoBoxItem bottomBoard">
				<input v-model="password" password class="infoBoxItemLeft" placeholder="请输入密码" />
			</view>
			<view class="infoBoxItem bottomBoard">
				<input v-model="againPassword" password class="infoBoxItemLeft" placeholder="请再次输入密码" />
			</view>
		</view>
		<bottomButton value="注册" :isFixed="false" @onPress="login" />
	</view>
</template>

<script>
	import bottomButton from "@/components/bottomButton.vue"
	import {
		loginMethod
	} from "@/utils/util.js"
import { register } from "../../api/byfz";
	export default {
		components: {
			bottomButton,
		},
		data() {
			return {
				phone: '',
				password: '',
				code: '',
				againPassword:''
			};
		},
		methods: {
			findPassword() {
				uni.navigateTo({
					url: './findPassword'
				})
			},
			gotoLogin() {
				uni.navigateTo({
					url: './login'
				})
			},
			async login(autoLogin = false) {
				if (!this.phone) {
					uni.showToast({
						title: '账号不能为空！',
						icon: 'none'
					})
					return;
				}
				if (!this.password || !this.againPassword) {
					uni.showToast({
						title: '密码不能为空！',
						icon: 'none'
					})
					return;
				}
				if(this.password !== this.againPassword){
					uni.showToast({
						title: '两次密码不一致！',
						icon: 'none'
					})
					return;
				}
				const res = await register({
					username: this.phone,
					password:this.password
				})
				uni.showToast({
					title: '注册成功!请前往登录.',
					icon: 'success'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.toptitle {
		margin-top: 100rpx;
		font-size: 35rpx;
	}

	.page {
		font-size: 27rpx;
		font-family: Adobe Heiti Std;
		color: #393939;
		line-height: 32rpx;
		overflow-y: auto;
		overflow-x: hidden;
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.loginIcon {
		width: 180rpx;
		magin-left: 25%;
		margin-left: auto;
		margin-right: auto;
		object-fit: fill;
		border-radius: 10rpx;
		margin-top: 100rpx;
	}

	.infoBox {
		margin-top: 60rpx;
		width: calc(100% - 120rpx);
		background-color: #fff;
		padding-left: 40rpx;
		border-radius: 13rpx 13rpx 13rpx 13rpx;
		opacity: 1;
		border: 1rpx solid #EEEEEE;
		margin-bottom: 50rpx;
	}

	.infoBoxItem {
		display: flex;
		justify-content: space-between;
		padding-top: 25rpx;
		padding-bottom: 25rpx;

		.infoBoxItemLeft {
			font-size: 32rpx;
			font-family: Adobe Heiti Std;
			line-height: 32rpx;
		}

		.infoBoxItemRight {
			font-size: 32rpx;
			font-family: Adobe Heiti Std;
			line-height: 32rpx;
			margin-right: 40rpx;
		}

		.rightImage {
			width: 21rpx;
			height: 35rpx;
			opacity: 1;
			margin-right: 40rpx;
		}
	}

	.bottomBoard {
		border-bottom: 1rpx solid #EEEEEE;
		width: 100%;
	}

	.bottomRegBox {
		.bottomRegBoxItem {
			margin-left: 20rpx;
			margin-right: 20rpx;
		}

	}
</style>